<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:criteria>
         <div novalidate class="form-inline auto" partial>
          <div class="form-group">
            <!-- 用户名: -->
            <input type="text" class="form-control" v-model="model.f_user_name"
            placeholder='用户名' condition="f_user_name like '{}%'">
          </div>
          <div class="form-group">
            <!-- 用户电话: -->
            <input type="text" class="form-control" v-model="model.f_user_phone"
            placeholder='用户电话' condition="f_user_phone like '{}%'">
          </div>
          <div class="form-group">
            <!-- 用户编号: -->
            <input type="text" class="form-control" v-model="model.f_user_id"
            placeholder='用户编号' condition="f_user_id like '{}%'">
          </div>
          <div class="form-group">
            <!-- 安检计划: -->
            <input type="text" placeholder='安检计划' class="form-control" v-model="$parent.$parent.model.f_check_plan.f_plan_name" @click="$parent.$parent.showChooser"  readonly="readonly">
          </div>
          <div class="form-group">
            安检状态：
            <v-select id="f_entry"
            placeholder='请选择安检状态'
            v-model='model.f_entry'
            :value.sync="$parent.$parent.model.f_entry"
            :options='$parent.$parent.f_entry_status'
            condition=""
            close-on-select clear-button></v-select>
          </div>
          <div class="form-group">
            审核状态：
            <v-select id="f_approved"
            placeholder='请选择审核状态'
            v-model='model.f_approved'
            :value.sync="$parent.$parent.model.f_approved"
            :options='$parent.$parent.f_approval_states'
            condition=""
            close-on-select clear-button></v-select>
          </div>
          <div class="form-group">
            <button class="btn btn-success" @click="search()">查询</button>
          </div>
          <div class="form-group">
            <modal :show.sync="$parent.$parent.showModal" v-ref:modal>
              <div slot="modal-header" class="modal-header">
                <h4 class="modal-title">
                  选择计划
                </h4>
              </div>
              <div slot="modal-body" class="modal-body">
                <plan-chooser :f.sync="$parent.$parent.f"  v-ref:chooser></plan-chooser>
              </div>
              <div slot="modal-footer" class="modal-footer">
                <button type="button" class="btn btn-success" @click="$parent.$parent.ok">确认</button>
                <button type="button" class="btn btn-default" @click="$parent.$parent.cancel">取消</button>
              </div>
            <modal>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>操作</th>
            <th>安检状态</th>
            <th>审核状态</th>
            <th>用户姓名</th>
            <th>用户编号</th>
            <th>入户时间</th>
            <th>离开时间</th>
            <th>安检人</th>
            <th>用户类型</th>
            <th>详细地址</th>
           </tr>
        </template>
        <template partial='body'>
          <td>
            <button class="btn btn-default"  @click='$parent.$parent.$parent.change(row)'>查看</button>
            <button class="btn btn-default"  @click='$parent.$parent.$parent.verify(row)'>审核</button>
          </td>
          <td>{{row.f_entry_status}}</td>
          <td>{{row.f_approved}}</td>
          <td>{{row.f_user_name}}</td>
          <td>{{row.f_user_id}}</td>
          <td>{{row.f_onsite_time}}</td>
          <td>{{row.f_offsite_time}}</td>
          <td>{{row.f_checker_name}}</td>
          <td>{{row.f_check_type}}</td>
          <td>{{row.f_address}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import Vue from 'vue'
import AppData from '../../stores/AppData'
export default {
  title: '安检单审核',
  props: ['f'],
  data () {
    let model = new PagedList('rs/sql/查找安检单', 20, {f_plan_id: 'this.f_check_plan.id', f_approved: 'this.f_approved[0]', f_entry_status: 'this.f_entry[0]', f_subcompany: 'this.f_subcompany'})
    model.f_check_plan = {f_plan_name: '', id: ''}
    model.f_approved = ['']
    model.f_entry = ['']
    model.f_subcompany = Vue.f_subcompany
    return {
      model: model,
      showModal: false
      // f_approval_states: this.$getParams('安检单审核状态', [{label:'请选择安检单审核状态',value:''}]),
      // f_entry_status: this.$getParams('安检状态', [{label:'请选择安检状态',value:''}]),
    }
  },
  computed: {
    f_entry_status () {
      return [{label: '全部', value: ''}, ...AppData.getParam('安检状态')]
    },
    f_approval_states () {
      return [{label: '全部', value: ''}, ...AppData.getParam('审核状态')]
    }
  },
  methods: {
    change (row) {
      if(row.f_check_type == '居民') {
        this.$goto('check-paper', {f_plan_id: row.f_check_plan_id, item: row, role: 'view'}, 'self')
      } else {
        this.$goto('check-paper-noncivil', {f_plan_id: row.f_check_plan_id, item: row, role: 'view'}, 'self')
      }
    },
    verify (row) {
        this.$goto('verify-form', {item: row, name: this.f.name}, 'self', this.refresh)
    },
    refresh () {
      this.$refs.paged.$refs.criteria.search()
    },
    showChooser () {
      this.showModal = true
    },
    ok () {
      this.showModal = false
      this.model.f_check_plan = this.$refs.paged.$refs.criteria.$refs.modal.$children[0].selectedRow
    },
    cancel () {
      this.showModal = false
      this.model.f_check_plan = {f_plan_name: '', id: ''}
    }
  }
}
</script>
